<template>
    <div class="page">
        <view class="profile-info">
            <view v-if="userInfo.avatarUrl">
                <img class="avatar" :src="userInfo.avatarUrl" />
                <view class="info">
                    <text class="name">{{userInfo.nickName}}</text>
                </view>
            </view>
            <view v-else class="goLogin">
                <img class="icon" src="/static/images/ic_menu_me_pressed.png" />
                <button open-type="getUserInfo" @getuserinfo="bindgetuserinfo" class="goLoginBtn">点击，授权登录~</button>
            </view>
        </view>
        <div class="page__bd">
            <div class="weui-grids">
                <block v-for="(item,index) in grids" :key="index">
                    <navigator url="" class="weui-grid" hover-class="weui-grid_active">
                        <image class="weui-grid__icon" :src="item.src" />
                        <div class="weui-grid__label">{{item.name}}</div>
                    </navigator>
                </block>
            </div>
        </div>
    </div>
</template>

<script>
var app = getApp();
export default {
  data() {
    return {
        userInfo:{},
      grids: [
        { src: "/static/images/icon_nav_button.png", name: "Button" },
        { src: "/static/images/icon_nav_cell.png", name: "Cell" },
        { src: "/static/images/icon_nav_toast.png", name: "Toast" },
        { src: "/static/images/icon_nav_dialog.png", name: "Dialog" },
        { src: "/static/images/icon_nav_button.png", name: "Progress" },
        { src: "/static/images/icon_nav_panel.png", name: "Msg" },
        { src: "/static/images/icon_nav_article.png", name: "Article" },
        { src: "/static/images/icon_nav_actionSheet.png", name: "ActionSheet" },
        { src: "/static/images/icon_nav_icons.png", name: "Icons" }
      ]
    };
  },
  onShow () {
    // console.log('全局变量', app);
    let userInfo = wx.getStorageSync('userInfo');
    let token = wx.getStorageSync('token');
    // console.log('缓存中的个人信息userInfo', userInfo);
    // console.log('缓存中的个人信息token', token);
    if (userInfo && token) {
      app.globalData.userInfo = userInfo;
      app.globalData.token = token;
    } else {
      app.globalData.userInfo = null;
      app.globalData.token = null;
    }
    if (app.globalData.userInfo) {
      this.userInfo = app.globalData.userInfo;
    } else {
      this.userInfo = {};
    }
  },
  methods: {
    bindgetuserinfo(e) {
      console.log(e);
      this.userInfo = e.target.userInfo;
    }
  }
};
</script>

<style scope>
.profile-info {
  width: 100%;
  height: 280rpx;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  padding: 0 30.25rpx;
  background: #333;
}
.profile-info .icon {
  position: absolute;
  left: 80rpx;
  top: 83rpx;
  height: 100rpx;
  width: 100rpx;
}
.profile-info .goLogin {
  margin-left: 185rpx;
}
.profile-info .goLoginBtn {
  background-color: #333;
  color: #fff;
}
.profile-info .avatar{
    height: 148rpx;
    width: 148rpx;
    border-radius: 50%;
    margin-left: 60rpx;
}

.profile-info .info{
    flex: 1;
    height: 50rpx;
    margin-left: 70rpx;
}

.profile-info .name{
    display: block;
    height: 45rpx;
    line-height: 45rpx;
    color: #fff;
    font-size: 37.5rpx;
    margin-bottom: 10rpx;
}
</style>
